<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>客服聊天</title>
    <script>
        (function (window) {//检查浏览器类型和ie版本
            var theUA = window.navigator.userAgent.toLowerCase();
            var isIE = (theUA.match(/msie\s\d+/) && theUA.match(/msie\s\d+/)[0]) || (theUA.match(/trident\s?\d+/) && theUA.match(/trident\s?\d+/)[0]);
            if (isIE) {
                //如果是IE，判断IE版本
                alert('非常抱歉！IE内核浏览器无法正常浏览该网页，请使用其他浏览器访问');
//                var ieVersion = theUA.match(/msie\s\d+/)[0].match(/\d+/)[0] || theUA.match(/trident\s?\d+/)[0];
//                if (ieVersion < 10) {
//                    alert('您的浏览器IE内核过低，可能会影响网页正常使用，建议升级或使用其他浏览器。');
//                }
            }
        })(window);
    </script>
    <link type="text/css" rel="stylesheet" href="js/emoji/jquery.emojiarea.css">
    <link type="text/css" rel="stylesheet" href="css/style.css">
    <style>
        .ball {
            position: fixed;
            z-index: 99999;
            line-height: 2.75rem;
            width: 2.75rem;
            height: 2.75rem;
            padding: .5rem;
            text-align: center;
            border-radius: 50%;
            color: #fff;
            /*透明边框，使元素看起来与边缘保持一定距离*/
            border: .6rem solid transparent;
            background-color: #ed424b;
            background-clip: padding-box;
            text-decoration: none;
        }
    </style>
</head>
<body class="ub ub-ver">
<a href="javascript:" id="ball" class="ball">拖我</a>
<div id="header">
    <div class="center ub">
        <div class="navLeft Btn" onclick="window.history.go(-1);"></div>
        <h1 id="title" class="ub-f">
            消息
        </h1>

        <div class="navRight"></div>
    </div>
</div>

<div id="chatContent" class="conScrollY ub-f">

    <div class="model teacher">
        <a onclick="chat(this);" class="chatLine ub ub-ac" data-count="97" id="123">
            <div class="Pic"><img src="img/src/userPicture.jpg"></div>
            <div class="ub-f">
                <div class="chatInfo">刘老师<span class="time">2017-5-11 15:27:56</span></div>
                <div class="span">请问，这只股怎么样？</div>
            </div>
            <div class="unRead">97</div>
        </a>

    </div>

    <div class="model kefu">
        <a onclick="chat(this);" class="chatLine ub ub-ac" data-count="98" id="763">
            <div class="Pic"><img src="img/src/userPicture.jpg"></div>
            <div class="ub-f">
                <div class="chatInfo">客服一<span class="time">2017-5-11 15:27:56</span></div>
                <div class="span">请问，这只股怎么样？</div>
            </div>
            <div class="unRead">98</div>
        </a>
        <a onclick="chat(this);" class="chatLine ub ub-ac" data-count="15" id="678">
            <div class="Pic"><img src="img/src/userPicture.jpg"></div>
            <div class="ub-f">
                <div class="chatInfo">客服二<span class="time">2017-5-11 15:27:56</span></div>
                <div class="span">请问，这只股怎么样？</div>
            </div>
            <div class="unRead">15</div>
        </a>
        <a onclick="chat(this);" class="chatLine ub ub-ac" data-count="6" id="345">
            <div class="Pic"><img src="img/src/userPicture.jpg"></div>
            <div class="ub-f">
                <div class="chatInfo">客服三<span class="time">2017-5-11 15:27:56</span></div>
                <div class="span">请问，这只股怎么样？</div>
            </div>
            <div class="unRead">6</div>
        </a>
        <a onclick="chat(this);" class="chatLine ub ub-ac" data-count="" id="222">
            <div class="Pic"><img src="img/src/userPicture.jpg"></div>
            <div class="ub-f">
                <div class="chatInfo">客服四<span class="time">2017-5-11 15:27:56</span></div>
                <div class="span">请问，这只股怎么样？</div>
            </div>
        </a>
        <a onclick="chat(this);" class="chatLine ub ub-ac" data-count="" id="111">
            <div class="Pic"><img src="img/src/userPicture.jpg"></div>
            <div class="ub-f">
                <div class="chatInfo">客服五<span class="time">2017-5-11 15:27:56</span></div>
                <div class="span">请问，这只股怎么样？</div>
            </div>
        </a>
        <a onclick="chat(this);" class="chatLine ub ub-ac" data-count="" id="666">
            <div class="Pic"><img src="img/src/userPicture.jpg"></div>
            <div class="ub-f">
                <div class="chatInfo">客服六<span class="time">2017-5-11 15:27:56</span></div>
                <div class="span">请问，这只股怎么样？</div>
            </div>
        </a>
        <a onclick="chat(this);" class="chatLine ub ub-ac" data-count="" id="7657">
            <div class="Pic"><img src="img/src/userPicture.jpg"></div>
            <div class="ub-f">
                <div class="chatInfo">客服七<span class="time">2017-5-11 15:27:56</span></div>
                <div class="span">请问，这只股怎么样？</div>
            </div>
        </a>
        <a onclick="chat(this);" class="chatLine ub ub-ac" data-count="" id="34522">
            <div class="Pic"><img src="img/src/userPicture.jpg"></div>
            <div class="ub-f">
                <div class="chatInfo">客服八<span class="time">2017-5-11 15:27:56</span></div>
                <div class="span">请问，这只股怎么样？</div>
            </div>
        </a>
        <a onclick="chat(this);" class="chatLine ub ub-ac" data-count="" id="345623">
            <div class="Pic"><img src="img/src/userPicture.jpg"></div>
            <div class="ub-f">
                <div class="chatInfo">客服九<span class="time">2017-5-11 15:27:56</span></div>
                <div class="span">请问，这只股怎么样？</div>
            </div>
        </a>
        <a onclick="chat(this);" class="chatLine ub ub-ac" data-count="" id="3445">
            <div class="Pic"><img src="img/src/userPicture.jpg"></div>
            <div class="ub-f">
                <div class="chatInfo">客服十<span class="time">2017-5-11 15:27:56</span></div>
                <div class="span">请问，这只股怎么样？</div>
            </div>
        </a>

        <div id="loadingMore">
            <img src="img/loading.gif">
            <span>加载更多...</span>
        </div>
    </div>

</div>


<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="js/emoji/jquery.emojiarea.js"></script>
<script type="text/javascript" src="js/emoji/faces5/emojis.js"></script>
<script type="text/javascript" src="js/Inertia.js"></script>
<script>
    new Inertia(document.getElementById('ball'));
</script>
<script>
    $(document).ready(function () {
        var $container = $('#chatContent');
        $container.scroll(function () {
            //滚动监听，只在滚动条高度为0时，才启用下拉组件
            var afterScrollTop = $container.scrollTop() + $container.outerHeight();
            if (afterScrollTop >= $container[0].scrollHeight) {
                //滑动到底部
                //设定间隔时间 rateTime 毫秒，防止滚动一次多次触发
                var scrollBottomTime = Date.parse(new Date()), rateTime = 1500;
                if (!(localStorage.getItem('scrollBottomTime') && scrollBottomTime - localStorage.getItem('scrollBottomTime') < rateTime)) {
                    localStorage.setItem('scrollBottomTime', scrollBottomTime);
                    loadingMore();//加载更多
                }
            }
        });
    });

    function returnChatLineHtml(info) {
        //解析会话信息，转换成html
        var id = info.id;
        var name = info.name;
        var pic = info.pic;
        var time = info.time;
        var msg = strToHtmlEmoji(info.last_msg);
        var chatLineHtml = '<a onclick="chat(this);" class="chatLine ub ub-ac" id="' + id + '">' +
                '<div class="Pic"><img src="' + pic + '"></div>' +
                '<div class="ub-f">' +
                '<div class="chatInfo">' + name + '<span class="time">' + time + '</span></div>' +
                '<div class="span">' + msg + '</div>' +
                '</div>' +
                '</a>';
        return chatLineHtml;
    }

    function onMessage(msgObj) {
        //接收消息处理，未读标记的处理
        var senderId = msgObj.id;
        var senderType = msgObj.type;
        var senderName = msgObj.name;
        var $senderId = $('#' + senderId);
        var sender_pic = msgObj.pic || msgObj.message.head_pic;
        var time = msgObj.message.time;
        var last_msg = msgObj.message.type == 'img' ? '图片' : strToHtmlEmoji(msgObj.message.content);
        if ($senderId && $senderId.length) {
            //用户存在于列表中
            unReadCount($senderId);//设置未读消息数
            $senderId.find('.span').html(last_msg);//写入最新消息内容
            var $clone = $senderId.clone(), $parent = $senderId.parent();//克隆，记住其直接父元素
            $senderId.remove();//删除
            $parent.prepend($clone);//将克隆体添加到其直接父元素的首位
        } else {
            //用户不存在于列表中
            var chatLineInfo = {
                id: senderId,
                name: senderName,
                pic: sender_pic,
                time: time,
                last_msg: last_msg
            };
            var chatLineHtml = returnChatLineHtml(chatLineInfo);//解析成html
            var $thisParent = $('.model.' + senderType);//定位其直接父元素
            $thisParent.prepend(chatLineHtml);//添加到其直接父元素的第一位
            unReadCount($thisParent.children()[0]);//第一位设置未读消息数
        }
    }

    function unReadCount(e, operate) {
        var $e = $(e);
        var $unRead = $e.find('.unRead');
        if (operate && operate == 'clear') {
            //清理未读消息数
            if ($unRead && $unRead.length) {
                $e.attr('data-count', 0);
                $e.data('count', 0);
                $unRead.remove();
            }
        } else {
            //设置未读消息数
            if ($unRead && $unRead.length) {
                var count = $e.data('count');
                count++;
                $e.attr('data-count', count);
                $e.data('count', count);
                count = count > 99 ? '99+' : count;
                $unRead.html(count);
            } else {
                $e.attr('data-count', 1);
                $e.data('count', 1);
                $e.append('<div class="unRead">1</div>');
            }
        }
    }

    function chat(e) {
        //改变聊天对象
        var $e = $(e);
        var id = $(e).attr('id');
        unReadCount($e, 'clear');//清理未读消息数
        window.location.href = "chat.html?id=" + id;
    }

    function loadingMore() {
        var $loadingMore = $('#loadingMore');
        $loadingMore.show();//开始加载动画
        setTimeout(function () {
            $loadingMore.hide();//清除加载动画
            //todo:获取数据并解析
            var chatLineInfoArr = [
                {
                    //测试数据
                    id: '',
                    name: '小邓子',
                    pic: 'img/src/userPicture.jpg',
                    time: '2017-05-09 18:20',
                    last_msg: '你好啊，这里是测试消这里是测试消息中心哦哦哦哦哦哦哦哦'
                },
                {
                    //测试数据
                    id: '',
                    name: '小李子',
                    pic: 'img/src/userPicture.jpg',
                    time: '2017-05-09 18:20',
                    last_msg: '嘿嘿嘿'
                }
            ];
            var chatLineHtml = '';
            $.each(chatLineInfoArr, function (index, item) {
                chatLineHtml += returnChatLineHtml(item);

            });
            $loadingMore.before(chatLineHtml);
        }, 1500);
    }

    setInterval(function () {
        //打开页面每5秒，模拟接收到消息
        var msgObj = {
            //测试数据
            type: 'kefu',//类型：老师：teacher；客服：kefu
            id: '123',
            pic: 'img/src/userPicture.jpg',
            name: '特朗普',
            message: {
                msg_id: '',
                head_pic: '',
                type: '',
                dir: '',
                time: '2017-5-15',
                content: '你好啊，测试消息来了'
            }
        };
        onMessage(msgObj);
    }, 5000);
</script>
</body>
</html>